import { useEffect, useState } from 'react';
import { useUrlSearchParams } from 'use-url-search-params';
import an58 from '@mmstudio/an000058';
import { Button, Checkbox, message } from 'antd';
import Pagination from '../../../components/pagination';
import RightContainer from '../../../components/rightcontainer';
import Title from './title';
import List from './list';
import { Message as M2, Result as R2 } from '../../api/class/add/content/add.api';
import { Message as M3, Result as R3 } from '../../api/class/add/content/del.api';
import api from '../../../atoms/api';
import { IData, Query as Q1, Result as R1 } from '../../api/class/add/query.api';
import Search from '../../../components/search';

export default function Content({
	initialquery,
	id
}: {
	initialquery: Q1;
	id: string;
}) {
	const [data, setdata] = useState<R1>({
		count: 0,
		data: []
	});
	const [query, setquery] = useState<Q1>(initialquery);
	const [, setParams] = useUrlSearchParams({}, { page: Number });
	async function reload(q: Q1) {
		q.id = id;
		setquery(q);
		setParams(q);
		const data = await an58<R1, Q1>(api['/api/class/add/query'], 'get', q);
		setdata(data);
		const s = data.data.filter((it) => {
			return it.class_id === id;	// 当前班级的学生
		}).map((it) => {
			return it.student_id;
		});
		setselected(s);
	}
	useEffect(() => {
		void reload(query);
	}, []);

	const [selected, setselected] = useState([] as string[]);
	const allselected = selected.length === data.data.length;
	const indeterminate = selected.length > 0 && selected.length < data.data.length;

	async function checkall() {
		if (allselected) {
			// uncheck all
			const ret = await an58<R2, M2>(api['/api/class/add/content/del'], 'post', {
				class_id: id,
				students: selected
			});
			if (ret.ok === false) {
				message.error(ret.message);
				return;
			}
			setselected([]);
		} else {
			// check all
			const students = data.data.map((it) => {
				return it.student_id;
			});
			const ret = await an58<R2, M2>(api['/api/class/add/content/add'], 'post', {
				class_id: id,
				students
			});
			if (ret.ok === false) {
				message.error(ret.message);
				return;
			}
			setselected(students);
		}
	}

	return <>
		<Title />
		<RightContainer>
			<div className='os'>
				<Search<IData>
					pagesize={Number(query.pagesize)}
					service={api['/api/class/add/query']}
					initq={query.q}
					onChange={(v) => {
						setdata(v);
					}} />
				<Checkbox
					checked={allselected}
					indeterminate={indeterminate}
					onChange={checkall}><Button shape='round' size='large' type='primary' onClick={checkall}>全选</Button></Checkbox>
			</div>
		</RightContainer>
		<List id={id} data={data.data} selected={selected} onChange={(list) => {
			setselected(list);
		}} />
		{/* 分页组件 */}
		<RightContainer>
			<Pagination
				current={Number(query.page || '1')}
				pageSize={Number(query.pagesize || '10')}
				showTitle
				total={data.count}
				onChange={(p, s) => {
					const q = {
						q: query.q,
						page: p.toString(),
						pagesize: s.toString()
					} as Q1;
					setquery(q);
					reload(q);
				}}
			/>
		</RightContainer>
		<style jsx>{`
		.os{
display:flex;
align-items: baseline;
}
		`}</style>
	</>;
}
